"use client";

import { memo } from "react";
import type { ReactNode, FC } from "react";

import { useAppSelector, shallowEqualApp } from "@/store/hooks";
import CommonHeader from "@/components/common-header";
import SongsItemV2 from "@/components/songs-item-v2";
import styles from "./style.module.scss";
interface IProps {
  children?: ReactNode;
}

interface HotRecommendItem {
  id: number;
  [key: string]: any;
}

const HotRecommends: FC<IProps> = (props) => {
  const { hotRecommends } = useAppSelector(
    (state: any) => ({
      hotRecommends: state.recommended.HotRecommends,
    }),
    shallowEqualApp
  );
  return (
    <div className={styles.hotRecommendsWrappers}>
      <CommonHeader
        icon="sprite_02"
        iconShow={true}
        name="热门推荐"
        moreLink="/discover/songs"
        keywords={["华语", "流行", "摇滚", "民谣", "电子"]}
      />
      <div className={styles.recommendList}>
        {hotRecommends.map((item: HotRecommendItem) => {
          return <SongsItemV2 item={item} key={item.id}></SongsItemV2>;
        })}
      </div>
    </div>
  );
};

export default memo(HotRecommends);
